<template>
  <div class="customize-dialog">
    <van-dialog v-model:show="showDialog">
      <h1 class='title'>{{title}}</h1>
      <div class="bg-[#fff]">
        <div class="px-2"><slot /></div>
        <div class="flex justify-between py-[18px] px-[38px]">
          <van-button round class="w-[110px] h-[40px] rounded-full flex justify-center items-center text-[#afafaf] text-base bg-[#f4f4f4] active:bg-[#faf8f8]" @click="$emit('cancel')">取消</van-button>
          <van-button round class="w-[110px] h-[40px] rounded-full flex justify-center items-center text-[#fff] text-base bg-[#2e7cff] active:bg-[#3c85ff]" @click="$emit('confirm')">确定</van-button>
        </div>
      </div>
    </van-dialog>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'

export default defineComponent({
  name: 'Basic',
  props: {
    title: {
      type: String,
      default: ''
    },
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const title = computed(() => props.title)
    const showDialog = computed(() => props.showDialog)
    return {
      title,
      showDialog
    }
  }
})
</script>

